<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <input type="search" placeholder="keywords" v-model="keywords">
        </p>
        <p>
            <label>
                Id:
                <input v-model="mytext.id">
            </label>
            <label>
                Name:
                <input v-model="mytext.name">
            </label>
            <label>
                Sex:
                <input v-model="mytext.sex">
            </label>

            <button @click="list.push(mytext)">add</button>
        </p>

        <div v-for="item,index in list.filter( item => item.name.indexOf(keywords) !== -1 )" :key="index">
            <span>
                {{ item.id }}
            </span>
            <span>
                {{ item.name }}
            </span>
            <span>
                {{ item.sex }}
            </span>

            <button @click="list.splice(index,1)">del</button>
        </div>
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                keywords: '',
                mytext: {
                    id: '',
                    name: '',
                    sex: ''
                },
                list:[
                    {id:'1001',name:'zhang',sex:'male'},
                    {id:'1002',name:'li',sex:'female'},
                    {id:'1003',name:'liu',sex:'male'}
                ]
            }
        })
    </script>
</body>
</html>